<!-- 分类页面 -->
<template>
	<view class="classLayout pageBg">
		<custom-navbar title="分类" :showSearch="false"></custom-navbar>
		<view class="classify">
			<theme-item v-for="(item,typeId) in classifyList " :key="item.typeId" :item="item"></theme-item>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from "vue"
	import {
		onLoad,
		onReady,
		onPageScroll,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		getMpClassifyList
	} from "@/api/classify.js"


	const classifyList = ref([{
			coverImg: "https://z-mytest.oss-cn-beijing.aliyuncs.com/creative/30b91971-4514-4ad7-bfb7-d8ce50487333.jpg",
			coverText: "游戏",
			createBy: "hiyori",
			createTime: "2025-02-24 17:15:24",
			delFlag: 0,
			publishTime: "2025-02-24 17:15:24",
			status: 0,
			typeId: "1",
			typeName: "游戏"
		},
		{
			coverImg: "http://img.hongyoubizhi.com/picture/pages/original/2025/01/10/14/126224692_p0.jpg",
			coverText: "风景",
			createBy: "hiyori",
			createTime: "2025-02-24 17:15:27",
			delFlag: 0,
			publishTime: "2025-02-24 17:15:24",
			remark: null,
			status: 0,
			typeId: "2",
			typeName: "风景",
			updateBy: null,
			updateTime: "2025-02-26 20:41:12"
		},
		{
			coverImg: "https://z-mytest.oss-cn-beijing.aliyuncs.com/creative/fc6c7050-0be6-4bb1-a241-fe91b171ff74.png",
			coverText: "动漫",
			createBy: "hiyori",
			createTime: "2025-02-24 17:15:28",
			delFlag: 0,
			publishTime: "2025-02-24 17:15:24",
			remark: null,
			status: 0,
			typeId: "4960462",
			typeName: "动漫",
			updateBy: null,
			updateTime: "2025-03-02 20:19:02"
		}
	])

	//  向后端获取数据
	onReady(() => {
		// 获取分类数据	
		getClassifyList()
	})

	const getClassifyList = () => {
		// 获取分类数据
		getMpClassifyList().then(res => {
				if (res.code == 200) {
					classifyList.value = res.data || []
				} else {
					uni.showToast({
						title: "获取数据异常",
						icon: "error",
					})
				}
			})
			.catch(err => {
				uni.showToast({
					title: "获取数据异常",
					icon: "error",
				})
			})
	}
</script>

<style lang="scss" scoped>
	.classLayout {
		.classify {
			padding: 30rpx;
			display: grid;
			gap: 15rpx;
			grid-template-columns: repeat(3, 1fr);
		}
	}
</style>